<template>
    <div>
        <div>
        <van-nav-bar title="闪电下单" left-text="" right-text="取消" @click-right="$router.back(-1)" left-arrow @click-left="$router.back(-1)"></van-nav-bar>
        <div class="flashOrder-service-box clearfix">
            <span class="color-6 font-3 service-title">服务分类</span>
            <div class="clearfix service-ul">
                <ul class="clearfix" :style="{width:liWidth + 'px'}">
                    <li class="service-li" ref="liWidth">
                        <img src="../../assets/image/index/icon_wzry.png" alt="">
                        <span class="color-3 font-24">王者荣耀</span>
                    </li>
                    <li class="service-li">
                        <img src="../../assets/image/index/icon_wzry.png" alt="">
                        <span class="color-3 font-24">王者荣耀</span>
                    </li>
                    <li class="service-li">
                        <img src="../../assets/image/index/icon_wzry.png" alt="">
                        <span class="color-3 font-24">王者荣耀</span>
                    </li>
                    <li class="service-li">
                        <img src="../../assets/image/index/icon_wzry.png" alt="">
                        <span class="color-3 font-24">王者荣耀</span>
                    </li>
                    <li class="service-li">
                        <img src="../../assets/image/index/icon_wzry.png" alt="">
                        <span class="color-3 font-24">王者荣耀</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="flashOrder-service-box clearfix">
            <span class="color-6 font-3 service-title">陪玩段位</span>
            <div class="clearfix service-ul" style="padding:0;">
                <ul class="clearfix">
                    <li class="duanwei text-align-c font-24" v-for="(item,index) in duanwei" :key="index" :class="[index == dIndex ? 'active' : '']" @click="duanweiTab(index)">
                        {{item}}
                    </li>
                </ul>
            </div>
        </div>
        <div class="flashOrder-service-box clearfix">
            <span class="color-6 font-3 service-title">陪玩性别</span>
            <div class="clearfix service-ul" style="padding:0;">
                <ul class="clearfix">
                    <li class="duanwei text-align-c font-24" v-for="(item,index) in sex" :key="index" :class="[index == sexIndex ? 'active' : '']" @click="sexTab(index)">
                        {{item}}
                    </li>
                </ul>
            </div>
        </div>
        <div class="flashOrder-service-box clearfix">
            <span class="color-6 font-3 service-title">时间</span>
            <div class="clearfix service-ul color-3 font-3" @click="isDatetimePicker = true">
                请选择服务的时间 
                <van-icon name="arrow" class="fr" size=".6rem" />
            </div>
        </div>
        <div class="flashOrder-service-box clearfix">
            <span class="color-6 font-3 service-title">数量</span>
            <div class="clearfix sun-num">
                <span class="fl add text-align-c add-left" @click="jian">-</span>
                <input class="fl num text-align-c font-3" type="text" v-model="yueTime">
                <span class="fl add text-align-c add-right" @click="jia">+</span>
            </div>
        </div>
        <div class="flashOrder-service-box clearfix">
            <span class="color-6 font-3 service-title">特殊喜好</span>
            <div class="clearfix service-ul" style="padding:0;">
                <ul class="clearfix">
                    <li class="duanwei text-align-c font-24" v-for="(item,index) in sex" :key="index" :class="[index == sexIndex ? 'active' : '']" @click="sexTab(index)">
                        {{item}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <van-tabbar>
            <span class="fabu-dynamic text-align-c">发布</span>
        </van-tabbar>
    <van-popup v-model="isDatetimePicker" position="bottom" :overlay="true" :close-on-click-overlay="true">
        <van-datetime-picker v-model="currentDate" type="datetime" :min-date="minDate" :max-date="maxDate" @confirm="confirmDate" @cancel="isDatetimePicker = !isDatetimePicker" />
    </van-popup>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
import { Toast } from 'vant'
export default {
    data(){
        return{
            liWidth:'',
            duanwei:['不限','铂金','钻石','至尊星耀','最强王者以上'],
            dIndex:0,
            sex:['不限','男生','女生'],
            sexIndex:0,
            isDatetimePicker:false,
            minHour: 10,
            maxHour: 20,
            minDate: new Date(),
            maxDate: new Date(2019, 10, 1),
            currentDate: new Date(),
            yueTime:10
        }
    },
    mounted(){
        this.liWidth = this.$refs.liWidth.scrollWidth * 5 + 14 * 5
    },
    methods:{
        // 段位选择
        duanweiTab(index){
            this.dIndex = index
        },
        // 性别选择
        sexTab(index){
            this.sexIndex = index
        },
        confirmDate(){

        },
        jian(){
            if(this.yueTime == 1){
                Toast("最少一个小时起约")
            }else{
                this.yueTime--
            }
        },
        jia(){
            this.yueTime++
        }
    }
}
</script>
<style scoped>
.service-ul::-webkit-scrollbar {/*滚动条整体样式*/
    width: 0;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 0;
}
.flashOrder-service-box{
    padding: .6rem .6rem .2rem .6rem;
}
.service-title{
    display: block;
}
.service-ul{
    padding: .4rem 0 0 0;
    overflow-y: auto;
}
.service-li{
    width: 2rem;
    float: left;
    padding: .4rem .8rem;
    border:solid .05rem #f5f5f5;
    border-radius: .4rem;
    margin-right: .4rem;
}
.duanwei{
    min-width: 2rem;
    display: inline-block;
    height: 1rem;
    line-height: 1.1rem;
    overflow: hidden;
    border-radius: .6rem;
    margin-right: .4rem;
    background-color: #f5f5f5;
    padding: 0 .6rem;
    margin-top: .4rem;
}
.active{
    background-color: #D84D4E;
    color: #fff;
}
.sun-num{
    width: 100%;
    height: 2rem;
    color: #fff;
    margin: 0 auto;
}
.add{
    background-color: #D84D4E;
    margin-top: .6rem;
    width: 20%;
    height: 1.2rem;
    line-height: 1.2rem;
    display: block;
    font-size: .8rem;
}
.num{
    margin-top: .6rem;
    width: 40%;
    height: auto;
    height: 1.2rem;
    line-height: 1.2rem;
    border: none;
    background-color: #D84D4E;
}
.add-left{
    margin-left: 10%;
    border-radius: .6rem 0 0 .6rem;
}
.add-right{
    border-radius: 0 .6rem .6rem 0;
}
</style>


